<template>
	<el-container class="home-container">
		<!-- 左侧菜单栏 -->
		<el-aside :width="isCollapse?'60px':'200px'" :style="'width:'+(isCollapse?'60px':'200px')"
			style="background-color: #304156;box-shadow:2px 0 6px rgba(0,21,41,.35)">
			<div class="aside-title" @click="homeClick" style="cursor: pointer;">
				<img src="../../assets/logo.png" class="sidebar-logo" />
				<span v-if="!isCollapse" style="margin-left: 12px;">后台管理系统</span>
			</div>
			<el-scrollbar wrap-class="scrollbar-wrapper" :style="'height:'+ maxHeight + 'px'">
				<el-menu background-color="#304156" text-color="#BFCBD9" active-text-color="#1890ff"
					@select="selectHandler" :default-active="routerUrl" :collapse="isCollapse"
					class="el-menu-vertical-demo">
					<Menu v-for="(item,index) in menuList" :item="item" :index="index"></Menu>
				</el-menu>
			</el-scrollbar>
		</el-aside>
		<!--  -->
		<el-container>
			<!-- 右侧头部用户信息 -->

			<el-header style="height: 50px;">
				<div class="header-block" style="display: flex;align-content: center;">
					<div class="pc-title">
						<div class="header-icon">
							<span>
								<el-icon @click="isCollapse = !isCollapse">
									<component :is="isCollapse ? 'Expand' : 'Fold'"></component>
								</el-icon>
							</span>
						</div>
					</div>
					<div class="pc-title" style="flex: 1;overflow-x: auto;overflow-y: hidden;">
						<gz-tags style=""></gz-tags>
					</div>
					<div class="header-pic">
						<div class="right-block">
							<div class="right-menu flex align-center">
								<!-- <div class="">
										<i class="Search hover-effect" @click="sousuoClick"
											style="font-weight: bold;font-size: 20px;color: #5a5e66;margin-right: 20px;"></i>
										<input v-model="searchValue" v-if="isShowSearchInput" type="text" placeholder="search" placeholder-style="color:#d9d9d9;" class="search-input"/>
									</div> -->

								<!-- <el-tooltip content="源码地址" effect="dark" placement="bottom">
										<gz-git id="ruoyi-git" class="right-menu-item hover-effect" />
									</el-tooltip>

									<el-tooltip content="文档地址" effect="dark" placement="bottom" style="margin: 0 20px;">
										<gz-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
									</el-tooltip>
									<gz-screenfull class="right-menu-item hover-effect" />

									<el-tooltip content="布局大小" effect="dark" placement="bottom" style="margin: 0 20px;">
										<gz-sizeSelect class="right-menu-item hover-effect" />
									</el-tooltip> -->
							</div>

							<el-dropdown trigger="click">
								<div class="icon-name">
									<img v-if="userInfo.headUrl" :src="userInfo.headUrl" />
									<img v-else src="@/assets/logo.png" />
								</div>
								<template #dropdown>
									<el-dropdown-menu>
										<el-dropdown-item icon="User" @click.native="goProfileClick">
											<span>个人中心</span>
										</el-dropdown-item>
										<!-- <el-dropdown-item icon="el-icon-my-theme" @click.native="themeDrawer = true">
										<span>布局设置</span>
									</el-dropdown-item> -->
										<el-dropdown-item icon="Right" @click.native="logoutClick">
											<span>退出登录</span>
										</el-dropdown-item>
									</el-dropdown-menu>
								</template>
							</el-dropdown>
						</div>
					</div>
				</div>
			</el-header>
			<!-- 右侧内容区域 -->
			<el-main class="custom-loading">

				<div class="main-block">
					<keep-alive>
						<transition name="fade">
							<router-view v-if="$route.meta.keepAlive" class="view">
							</router-view>
						</transition>
					</keep-alive>

					<transition name="fade">
						<router-view v-if="!$route.meta.keepAlive" />
					</transition>
				</div>

				<!-- 主题抽屉 -->
				<el-drawer :visible.sync="themeDrawer" :size="230" :show-close="false">
					<div class="drawer-content">
						<div class="theme-block">
							<div class="theme-text">主题颜色</div>
							<div class="theme-choose">
								<custom-theme @change="styleChange"></custom-theme>
							</div>
						</div>
						<el-divider></el-divider>
					</div>
				</el-drawer>
			</el-main>
			<!-- <el-footer>Footer</el-footer> -->
		</el-container>
	</el-container>
</template>

<script>
	import router from "../../router/index.js"
	// import gz-git from "../../components/gz/gz-git/gz-git.vue"
	import Menu from "./Menu.vue"
	export default {
		components: {
			Menu,
		},
		mounted() {
			this.maxHeight = document.body.clientHeight - 50
		},
		data() {
			return {
				isShowSearchInput: false, //是否显示搜索input框
				searchValue: "", //搜索框对应的值
				themeDrawer: false,
				isCollapse: false,
				passDialog: false,
				passForm: {
					oldPassword: "",
					newPassword: "",
					newAPassword: "",
				},
				maxHeight: 500
			};
		},
		computed: {
			menuList: function() {
				console.info("menuList", this.$store.sys().menuList)
				return this.$store.sys().menuList
			},
			userInfo: function() {
				return this.$store.sys().userInfo
			}
		},
		watch: {
			passDialog() {
				if (!this.passDialog) {
					this.$refs.passForm.resetFields();
				}
			},
		},

		methods: {
			sousuoClick() {
				// console.log(this.$refs.searchInput,'++++++++++++');
				// this.$refs.searchInput.focus()
				this.isShowSearchInput = !this.isShowSearchInput
			},
			styleChange(val) {
				localStorage.setItem("theme", val);
			},
			//密码提交修改
			passSubmitClick() {
				this.$confirm("确定修改密码?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
					.then(async () => {
						await this.$api.sysUserEditPassword(this.passForm);
						this.$notify({
							title: "提示",
							message: "修改成功,3s后退出登录",
							type: "success",
						});
						localStorage.clear();
						sessionStorage.clear();
						setTimeout(() => {
							this.$router.replace("/login");
						}, 3000);
					})
					.catch(() => {});
			},
			async logoutClick() {
				await this.$api.logout();
				localStorage.clear();
				sessionStorage.clear();
				//跳转登录页
				this.$router.replace("/login");
			},
			homeClick() {
				this.$router.push("/index");
			},
			//个人中心
			goProfileClick() {
				this.$router.push("/sysProfile");
			},
			//选中
			selectHandler(index, indexPath) {
				console.info("selectHandler", index, indexPath)
				let item = this.getMenuByList(this.menuList, index)
				let query = item.routerParam ? JSON.parse(item.routerParam) : {}
				this.$router.push({
					path: index,
					query: query
				})
			},
			getMenuByList(menuList, path) {
				if (!menuList) {
					return null
				}
				for (var i = 0; i < menuList.length; i++) {
					let item = menuList[i]
					// console.info("循环",item.name,item.routerUrl,path)
					if (item.type == 'CAIDAN') {
						let menu = this.getMenuByList(item.children, path)
						if (menu != null) {
							return menu
						}
					} else if (item.type == 'ZICAIDAN') {
						if (item.routerUrl == path) {
							return item
						}
					}
				}
				return null
			}
		},
	};
</script>

<style lang="scss" scoped>
	.home-container {
		height: 100%;
		background-color: #304156;

		.el-header {
			height: 50px;
			background-color: #fff;

			.header-block {
				display: flex;
				// justify-content: space-between;
				height: 100%;

				.pc-title {
					display: flex;
					align-items: center;

					.header-icon {
						width: 20px;
						text-align: center;
						font-size: 20px;
						line-height: 30px;
						color: #000;
						cursor: pointer;
					}
				}

				.header-pic {
					display: flex;
					height: 100%;

					.right-block {
						display: flex;
						height: 100%;
						overflow: hidden;

						.icon-name {
							height: 40px;
							width: 40px;
							margin: 5px;
							background-color: black;
							border-radius: 10px;
							cursor: pointer;

							>img {
								height: 100%;
								width: 100%;
								border-radius: 10px;
							}

							>span {
								display: block;
								font-weight: 600;
								text-align: center;
								line-height: 60px;
								color: #ffffff;
							}
						}
					}
				}
			}
		}

		.el-aside {
			background-color: #ffffff;
			color: #409eff;
			text-align: left;
			// line-height: 100px;
			overflow: hidden;
			overflow-x: hidden;

			.aside-title {
				height: 50px;
				line-height: 50px;
				width: 100%;
				text-align: center;
				align-items: center;

				>span {
					line-height: 50px;
					font-size: 14px;
					font-weight: 1000;
					color: #ffffff;
				}
			}
		}

		.el-main {
			background-color: #e9eef3;
			color: #333;
			overflow-y: auto;
			padding: unset;

			.main-block {}

			.main-header {
				height: 30px;
				background-color: #fff;
				padding: 0 5px;

				.header-icon {
					width: 35px;
					text-align: center;
					font-size: 25px;
					line-height: 30px;
					cursor: pointer;
				}
			}
		}
	}

	.fade-enter,
	.fade-leave-active {
		opacity: 0;
		-webkit-transform: translate(30px, 0);
		transform: translate(30px, 0);
	}

	.fade-leave-active,
	.fade-enter-active {
		opacity: 0;
		-webkit-transform: translate(-30px, 0);
		transform: translate(-30px, 0);
	}

	.theme-block {
		display: flex;
		overflow: hidden;
		justify-content: space-between;

		.theme-text {
			line-height: 32px;
			margin-right: 20px;
			color: #909399;
			font-size: 15px;
		}

		.theme-choose {}
	}

	.sidebar-logo {
		width: 32px;
		height: 32px;
		vertical-align: middle;
	}

	.right-menu {
		line-height: 50px;

		.hover-effect {
			cursor: pointer;
			transition: background .3s;

			.hover-effect:hover {
				background: rgba(0, 0, 0, .025)
			}
		}
	}

	.search-input {
		border-bottom: 1px solid #d9d9d9;
		padding: 5px 0;
		margin-right: 20px;
	}

	.search-input:focus {
		outline-style: none;
	}

	:deep(.el-scrollbar__wrap) {
		overflow: auto;
		overflow-x: hidden;
	}

	:deep(.el-menu-vertical-demo:not(.el-menu--collapse)) {
		width: 200px;
		min-height: 400px;
		border-right: unset;
	}
</style>